<template>
  <div class="myStyle myMain" ref="print" id="print">
    <div class="stroke box_l">
      <StrokeDetial
        style="height: 43%"
        title="产能统计分析"
        url="general/capacityDesign"
      >
        <div class="flex_center">
          <ElementRadio
            :options="RadioOptions"
            v-model="model"
            :isButton="true"
            @change="radioChange"
          />
        </div>
        <div class="cont_box">
          <img src="@/assets/images/echarts/zu.png" class="btm" alt="" />
          <span> 总产能 </span>
          <countTo
            class="countTo"
            :startVal="cntjfxData.startVal"
            :endVal="cntjfxData.endVal"
            :duration="1500"
          ></countTo>
          <span> 环比 </span>
          <div
            class="percentage_box text_shadow_danger"
            v-if="cntjfxData.huanbi < 0"
          >
            {{ cntjfxData.huanbi }}%
            <img
              class="jiang"
              src="~@/assets/images/echarts/jiang.png"
              alt=""
            />
          </div>
          <div class="percentage_box text_shadow" v-else>
            {{ cntjfxData.huanbi }}%
            <img class="jiang" src="@/assets/images/echarts/sheng.png" alt="" />
          </div>
        </div>
        <XRow class="cntjEcharts" :data="cntjfxData.list" barRight="19%"></XRow>
      </StrokeDetial>
      <StrokeDetial
        style="height: 31.5%"
        title="生产计划统计"
        url="general/productionDesign"
      >
        <div class="flex_center">
          <ElementRadio
            :options="RadioOptions"
            v-model="model"
            :isButton="true"
            @change="radioChange"
          />
        </div>
        <MoreDirection
          :ySplitLineShow="true"
          class="sctjEcharts"
          :legendData="['已完成', '进行中']"
          :isLegend="true"
          :data="scjhtjData"
          unit="%"
        />
      </StrokeDetial>
      <StrokeDetial style="height: 25.5%" title="人员数据统计">
        <MoreDirection
          :ySplitLineShow="true"
          :data="ryshtjData"
          :legendData="['已完成']"
        />
      </StrokeDetial>
    </div>
    <div class="box_c stroke">
      <StrokeDetial style="height: 100%" title="电力仪表监控" url="general/lcd">
        <div class="flex_center">
          <ElementSelect
            ref="psNameSelect"
            :data="selectList"
            :isSelected="true"
            @select="selectListd"
          />
        </div>
        <div class="flex_center pieGauge_box">
          <PieGauge
            class="item"
            label="℃"
            :fontSize="1.3"
            :number="[center[0], '100']"
          />
          <PieGauge
            class="item"
            label="KV"
            :fontSize="1.3"
            :number="[center[1], '200']"
          />
          <PieGauge
            class="item"
            label="A"
            :fontSize="1.3"
            :number="[center[2], '7']"
          />
        </div>
      </StrokeDetial>
    </div>
    <div class="stroke box_r">
      <StrokeDetial
        style="height: 38%"
        title="电能/水能消耗"
        url="general/hydroenergyDesign"
      >
        <div class="flex_between">
          <div class="sel_box">
            <button
              v-for="(item, index) in btnList"
              :key="index"
              @click="btnValue = item.id"
              :class="btnValue == item.id ? 'button_active' : ''"
            >
              <img :src="item.img" alt="" />{{ item.title }}
            </button>
          </div>
          <ElementRadio
            :options="RadioOptions"
            v-model="model"
            :isButton="true"
            @change="radioChange"
          />
        </div>
        <MoreDirection
          :ySplitLineShow="true"
          class="sctjEcharts"
          :legendData="['生产用电', '生活用电']"
          :isLegend="true"
          :data="dnsnxhData"
          unit="%"
        />
      </StrokeDetial>
      <StrokeDetial
        style="height: 33%"
        title="产成品统计分析"
        url="general/finishedDesign"
      >
        <div class="flex_center">
          <ElementRadio
            :options="RadioOptions"
            v-model="model"
            :isButton="true"
            @change="radioChange"
          />
          <ElementSelect
            ref="psNameSelect"
            :data="selectList"
            :isSelected="true"
            @select="selectListd"
          />
        </div>
        <div class="flex_center pieGauge_box">
          <PieImg
            legendLeft="56%"
            length="5"
            :img="require('@/assets/images/echarts/zbjsc.png')"
          />
        </div>
      </StrokeDetial>
      <StrokeDetial
        style="height: 29%"
        title="产线设备监控"
        url="general/equipment"
      >
        <div class="flex_center">
          <ElementSelect
            ref="psNameSelect"
            :data="selectList"
            :isSelected="true"
            @select="selectListd"
          />
        </div>
        <div class="statusBox">
          <StatusBox
            class="item"
            v-for="(item, index) in cxsbjk"
            :key="index"
            :data="item"
          />
        </div>
      </StrokeDetial>
    </div>
  </div>
</template>

<script>
import CountTo from "vue-count-to"; //数字递增
import StatusBox from "@/components/myComponents/status/index.vue"; //状态
export default {
  components: {
    CountTo,
    StatusBox,
  },
  data() {
    return {
      //产能统计分析
      cntjfxData: {
        startVal: 0,
        endVal: 210017,
        list: [
          { name: "仰口基地", value: "123" },
          { name: "北龙口基地", value: "321" },
          { name: "崂峰口基地", value: "123" },
          { name: "崂东口基地", value: "124" },
          { name: "崂石口基地", value: "243" },
          { name: "崂泉口基地", value: "218" },
          { name: "崂河口基地", value: "142" },
        ],
        huanbi: 20,
      },
      form: { value: "" },
      //生产计划统计
      scjhtjData: [
        { name: "仰口", value1: 33, value2: 93 },
        { name: "北龙口", value1: 53, value2: 32 },
        { name: "崂峰口", value1: 78, value2: 65 },
        { name: "崂东口", value1: 12, value2: 35 },
        { name: "崂泉口", value1: 90, value2: 52 },
        { name: "崂石口", value1: 12, value2: 35 },
        { name: "崂河口", value1: 90, value2: 52 },
      ],
      //人员数据统计
      ryshtjData: [
        { name: "仰口", value1: 33 },
        { name: "北龙口", value1: 53 },
        { name: "崂峰口", value1: 78 },
        { name: "崂东口", value1: 12 },
        { name: "崂泉口", value1: 90 },
        { name: "崂石口", value1: 12 },
        { name: "崂河口", value1: 90 },
      ],
      //电力仪表监控
      center: [22, 98, 2.5],
      //电能/水能消耗
      dnsnxhData: [
        { name: "仰口", value1: 33, value2: 93 },
        { name: "北龙口", value1: 53, value2: 32 },
        { name: "崂峰口", value1: 78, value2: 65 },
        { name: "崂东口", value1: 12, value2: 35 },
        { name: "崂泉口", value1: 90, value2: 52 },
        { name: "崂石口", value1: 12, value2: 35 },
        { name: "崂河口", value1: 90, value2: 52 },
      ],
      //产线设备监控
      cxsbjk: [
        { name: "设备一", status: "正常" },
        { name: "设备二", status: "停机" },
        { name: "设备三", status: "正常" },
        { name: "设备四", status: "正常" },
      ],
      model: "month",
      //单选按钮列表
      RadioOptions: [
        {
          value: "month",
          label: "当月",
        },
        {
          value: "year",
          label: "当季",
        },
        {
          value: "zi",
          label: "自定义",
        },
      ],
      btnList: [
        {
          id: 1,
          title: "电能消耗",
          img: require("@/assets/images/echarts/dianicon.png"),
        },
        {
          id: 2,
          title: "水能消耗",
          img: require("@/assets/images/echarts/shuiicon.png"),
        },
      ],
      btnValue: 1,
      selectList: [
        { value: "", label: "全部" },
        { value: "1", label: "选项一" },
      ],
    };
  },
  created() {},
  mounted() {
    // console.log(1, this.formatDate);
    // this.$refs.numberRoll.toOrderNum(0);
    // setTimeout(() => {
    //   try {
    //     this.$refs.numberRoll.toOrderNum(12345);
    //   } catch (e) {
    //     // 错误处理代码片段
    //   }
    // }, 1000);
  },
  methods: {
    selectList(e) {},
    printEvent() {
      this.$print(this.$refs.print);
    },
    radioChange() {},
  },
};
</script>

<style lang="scss" scoped>
.myMain {
  align-items: flex-end;
  display: flex;
  .box_l,
  .box_c,
  .box_r {
    width: 29vw;
    height: 98.9%;
    position: relative;
    top:-1%;
    overflow: auto;
    .pieGauge_box {
      width: 100%;
      height: calc(100% - 52px);
      // margin-top: 1vh;
      //  background: red;
      .item {
        width: 33%;
        float: left;
        height: 170px;
      }
    }
    .cntjEcharts {
      height: calc(100% - 125px);
    }
    .sctjEcharts {
      height: calc(100% - 50px);
    }
    .statusBox {
      width: 100%;
      height: calc(100% - 35px);
      padding: 0.5vh 0 0.5vh;
      // display: -webkit-box;
      // -webkit-overflow-scrolling: touch;
      display: flex;
      overflow-x: auto;
      .item {
        flex-shrink: 0;
        width: 25%;
        // float: left;
      }
    }
  }
  .box_c {
    width: 39.5vw;
    height: 30vh;
    margin: 0 0.6vw;
  }
  .box_l {
    .cont_box {
      width: 80%;
      margin-left: 10%;
      height: 80px;
      // margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 10;
      span {
        font-size: 20px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #feffff;
        margin-right: 25px;
        position: relative;
        z-index: 10;
      }
      .btm {
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 1;
      }
      .percentage_box {
        height: 32px;
        font-size: 32px !important;
        position: relative;
        z-index: 10;
        display: flex;

        align-items: flex-start;
        .jiang {
          width: 19px;
        }
      }
    }
  }
  .box_r {
    .sel_box {
      display: flex;
      button {
        height: 28px;
        font-size: 14px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        text-align: left;
        line-height: 10px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #1579bb;
        border: none;
        margin-right: 5px;
        padding-right: 7px;
        border: 1px solid #1579bb;
        color: #d4f0ff;
        cursor: pointer;
        img {
          width: 12px;
          height: 14px;
          margin-right: 5px;
        }
      }
      .button_active {
        background: #2a9dbb;
        color: #ffffff;
        border: 1px solid #00ffff;
      }
    }
  }
}
</style>>

